$(function() {
    //初始化文章类别
    function initCate() {
        $.ajax({
            type: 'GET',
            url: '/my/article/cates',
            success: function(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message);
                }

                layui.layer.msg(res.message);
                let htmlStr = template('tpl-cate', res);
                $('[name="cate_id"]').html(htmlStr);
                layui.form.render(); //通知layui重新渲染动态生成的select
            },
            timeout: 3000,
            error: function() {
                return layui.layer.msg('出错啦');
            }
        });
    }
    initCate();

    //初始化富文本编辑器
    initEditor();

    // 1. 初始化图片裁剪器
    var $image = $('#image')

    // 2. 裁剪选项
    var options = {
        aspectRatio: 1,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)

    //选择图片文件
    $('#btnChooseImage').on('click', function() {
        $('#coverFile').click();
    });

    //获取上传文件
    $('#coverFile').on('change', function(e) {
        let fileList = e.target.files;
        if (fileList.length === 0) {
            return layui.layer.msg('请选择图片');
        }

        let file = e.target.files[0];
        let newImgURL = URL.createObjectURL(file);
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options); // 重新初始化裁剪区域
    });

    //定义文章的发布状态
    let state = '已发布';

    $('#btnSave2').on('click', function() {
        state = '草稿';
    });

    //发布文章
    $('#form-pub').on('submit', function(e) {
        e.preventDefault();
        //基于form表单，快速创建一个formdata对象
        const fd = new FormData($(this)[0]); //$(this)[0] 转为原生DOM对象 FormData用于上传二进制文件

        //用于向表单追加数据
        fd.append('state', state);

        //将裁剪区域的图片输出为二进制图片文件
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 280,
                height: 280
            })
            .toBlob(function(blob) { // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                fd.append('cover_img', blob);
                //发送ajax
                publishArticle(fd);
            })


        // fd.forEach(function(value, key) {
        //     console.log(key, value);
        // });
    });

    //发布文章
    function publishArticle(fd) {
        $.ajax({
            type: 'POST',
            url: '/my/article/add',
            data: fd,
            //向服务器提交formdata数据，要想ajax配置两个必要项
            contentType: false, //防治jquery对其进行编码操作，使文件无法被服务器识别
            processData: false, //防治其被转化为对象
            success: function(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message);
                }

                layui.layer.msg(res.message);
                //发布文章成功后，跳转到文章列表页
                location.href = '/article/art_list.html';
            },
            timeout: 3000,
            error: function() {
                return layui.layer.msg('出错啦');
            }
        });
    }
});